<template>
  <div ref="echartsPie" class="echartsPie"></div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
import "echarts-gl";
const echartsPie = ref(); // 使用ref创建虚拟DOM引用，使用时用main.valued

let props = defineProps({
  options: Object,
  titleName: String,
});
let myChart = null;
onMounted(() => {
  window.addEventListener("resize", resizeChart);
});

function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

watch(
  () => props.options,
  (newval, oldval) => {
    init(newval);
  },
  {
    deep: true,
  }
);

async function init(newval) {
  // 基于准备好的dom，初始化echarts实例
  if (!myChart) {
    myChart = echarts.init(echartsPie.value);
  }
  const seriesData1 = newval.ys || [];
  const xAxisList = newval.xAxis;
  console.log(newval);
  // 传入数据生成 option
  if (newval.more) {
    const option = {
      legend: {
        show: true,
        textStyle: {
          color: "#6F87B1",
          fontSize: 12,
        },
        right: 10,
        top: 0,
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 40,
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "#2263BF",
        formatter: (p) => {
          let dom = `<div style="color:#fff">
        ${p[0].data}条
        </div>`;
          return dom;
        },
      },
      grid: {
        top: "20%",
        left: "1%",
        right: "0%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: xAxisList,

        axisLabel: {
          color: "#999999",
          fontSize: 12,
        },
        axisLine: {
          lineStyle: {
            color: "#979797",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#333333",
          fontSize: 12,
          fontWeight: "bold",
        },
        axisLabel: {
          color: "#999999",
          fontSize: 12,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#979797",
            opacity: 0.21,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#979797"],
            opacity: 0.21,
            width: 1,
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "城管",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 10,
          smooth: true,
          itemStyle: {
            color: "#2D9BFC",
          },
          lineStyle: {
            color: "#2D9BFC",
          },

          data: newval.cg,
        },
        {
          name: "环保",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: "#FFCF37",
          },
          lineStyle: {
            color: "#FFCF37",
          },

          data: newval.hb,
        },
        {
          name: "安全",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: "#28BC59",
          },
          lineStyle: {
            color: "#28BC59",
          },

          data: newval.aq,
        },
        {
          name: "社区",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: "#CDDEE1",
          },
          lineStyle: {
            color: "#CDDEE1",
          },

          data: newval.sq,
        },
      ],
    };

    myChart.setOption(option);
  } else {
    const option = {
      legend: {
        show: false,
        textStyle: {
          color: "#6F87B1",
          fontSize: 12,
        },
        right: 10,
        top: 0,
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 40,
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "#2263BF",
        formatter: (p) => {
          let dom = `<div style="color:#fff">
        ${p[0].data}条
        </div>`;
          return dom;
        },
      },
      grid: {
        top: "5%",
        left: "1%",
        right: "0%",
        bottom: "0%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: xAxisList,

        axisLabel: {
          color: "#999999",
          fontSize: 12,
        },
        axisLine: {
          lineStyle: {
            color: "#979797",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#333333",
          fontSize: 12,
          fontWeight: "bold",
        },
        axisLabel: {
          color: "#999999",
          fontSize: 12,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#979797",
            opacity: 0.21,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#979797"],
            opacity: 0.21,
            width: 1,
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: "#2D9BFC",
          },
          lineStyle: {
            color: "#2D9BFC",
          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(25,163,223,.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(25,163,223, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          data: seriesData1,
        },
      ],
    };

    myChart.setOption(option);
  }
}
</script>
<style scoped>
.echartsPie {
  width: 100%;
  height: 100%;
}
</style>
